import React, { useState } from 'react';
import classNames from 'classnames';

export enum AlertType {
    Info = 'info',
    Success = 'success',
    Warning = 'warning',
    Error = 'error'
}

export enum AlertEffect {
    Light = 'light',
    Dark = 'dark'
}

export enum AlertIconType {
    info = "icon-tishi1",
    success = "icon-zhengque",
    warning = "icon-jinggao",
    error = "icon-guanbi1",
}

interface AlertProps {
    title?: any,
    type?: AlertType,
    effect?: AlertEffect,
    closable?: boolean,
    showIcon?: boolean,
    center?: boolean,
    description?: any,
    closeText?: string,
    className?: string,
    close?: () => void,
    children?: React.ReactNode
}

interface ChildrenSlotProps {
    type: AlertType,
    description: any,
    showIcon: boolean,
    title: any,
    closeText: any,
    closable: boolean,
    setIsShow: (isShow: boolean) => void,
    close: () => void,
}

const ChildrenSlot: React.FC<ChildrenSlotProps> = (props) => {

    const { type, description, showIcon, title, setIsShow, close, closeText, closable } = props;

    const handleClose = () => {
        setIsShow(false);
        close && close();
    }

    const iconClass = classNames('iconfont', AlertIconType[type], {
        'icon-description': description
    })

    return <div className={'yulang-alert-content-container'}>
        {showIcon && <i className={iconClass}></i>}
        <div className={'yulang-alert-content-content-container'}>
            <div className={'yulang-alert-title-container'}>
                <div>{title}</div>
                <div className={'close-container'} onClick={handleClose}>
                    {closable ? closeText ? <div>{closeText}</div> : <i className={"iconfont icon-guanbi"}></i> : <></>}
                </div>
            </div>
            <div className={"yulang-alert-description"}>
                {description}
            </div>
        </div>
    </div >
}

const Alert: React.FC<AlertProps> = (props) => {

    const { effect, children, type, description, showIcon, title, close, closeText, closable } = props;

    const [isShow, setIsShow] = useState<boolean>(true);

    const childrenSlotProps = {
        type: type ?? AlertType.Info,
        description,
        showIcon: showIcon ?? false,
        title,
        setIsShow,
        close: close ?? (() => { }),
        closeText,
        closable: !closable ?? false
    }

    const classes = classNames('yulang-alert-container', `yulang-alert-effect-${effect}`, `yulang-alert-type-${type}`)

    if (isShow && children) {
        return (<div className={classes}>
            {children}
        </div>)
    } else if (isShow && !children) {
        return <div className={classes}>
            <ChildrenSlot {...childrenSlotProps}></ChildrenSlot>
        </div>
    } else {
        return <></>
    }
}

Alert.defaultProps = {
    type: AlertType.Info,
    effect: AlertEffect.Light,
    closable: false,
    showIcon: false,
    center: false,

}

export default Alert;